<template>
  <i :class="'pcy-icon-' + icon"></i>
</template>

<script>
  export default {
    name: 'pcyIcon',

    props: {
      icon: String
    }
  };
</script>

<style lang="scss" scoped>
[class^="pcy-icon-"], [class*=" pcy-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'iconfont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

iconfont{
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  @keyframes rotating {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  } 
  .pcy-icon-loading {
    animation: rotating 2s linear infinite;
  }
  .pcy-icon-loading::before{
    content: "\e602";
    @extend iconfont;
  }
  

  .pcy-icon-shu::before{
    content: "\e670";
    @extend iconfont;
  }
  .pcy-icon-loading1::before{
    content: "\e653";
    @extend iconfont;
  }

  .pcy-icon-gou::before{
    content: "\e660";
    @extend iconfont;
  }
  .pcy-icon-wechat::before{
    content: "\e621";
    @extend iconfont;
  }
  .pcy-icon-pan::before{
    content: "\e657";
    @extend iconfont;
  }
   .pcy-icon-song::before{
    content: "\e612";
    @extend iconfont;
  }
   .pcy-icon-dengpao::before{
    content: "\e658";
    @extend iconfont;
  }
  .pcy-icon-left::before{
    content: "\e600";
    @extend iconfont;
  }
  .pcy-icon-right::before{
    content: "\e690";
    @extend iconfont;
  }
  .pcy-icon-rubish::before{
    content: "\e60e";
    @extend iconfont;
  }
  .pcy-icon-pen::before{
    content: "\e706";
    @extend iconfont;
  }
  .pcy-icon-link::before{
    content: "\e614";
    @extend iconfont;
  }
</style>
